<template>
  <div>
    <el-form :model="reviewForm" :inline="true" size="medium" label-width="100px" label-position="left" style="border: 1px solid #ccc; padding: 20px 0">
      <el-form-item label="年份">
        <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
      </el-form-item>
      <el-form-item>
        <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
          <el-checkbox v-for="city in cities" :label="city" :key="city">{{ city }}</el-checkbox>
        </el-checkbox-group>
      </el-form-item><br>
      <el-form-item label="状态">
        <el-checkbox-group v-model="checkboxGroup2" size="mini">
          <el-checkbox-button v-for="item in status" :label="item" :key="item">{{ item }}</el-checkbox-button>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="发起人">
        <el-select v-model="value1" multiple placeholder="请选择" size="mini">
          <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="类别">
        <el-select v-model="value2" multiple placeholder="请选择" size="mini">
          <el-option
              v-for="item in options2"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <el-table
        :data="tableData"
        style="width: 100%" @row-click="handleRowClick">
      <el-table-column
          prop="sn"
          label="序号"
          width="180">
      </el-table-column>
      <el-table-column
          prop="name"
          label="发起人"
          width="180">
      </el-table-column>
      <el-table-column
          prop="type"
          label="评审分类">
      </el-table-column>
      <el-table-column
          prop="subject"
          label="标题">
      </el-table-column>
      <el-table-column
          prop="date"
          label="发起日期">
      </el-table-column>
      <el-table-column
          prop="status"
          label="当前状态">
      </el-table-column>
    </el-table>
    <el-pagination
        background
        layout="prev, pager, next"
        :total="100">
    </el-pagination>
  </div>
</template>

<script>
const cityOptions = ['2020', '2021', '2022', '2024', '2025'];
const status = ['通过', '未通过', '进行中'];
export default {
  name: "Review",
  data() {
    return {
      checkAll: false,
      checkedCities: ['2021', '2022'],
      cities: cityOptions,
      isIndeterminate: true,
      checkboxGroup2: ['已完成'],
      status: status,
      options: [
        {
          value: '选项1',
          label: '张三'
        }, {
          value: '选项2',
          label: '李四'
        }, {
          value: '选项3',
          label: '王五'
        }, {
          value: '选项4',
          label: '赵六'
        }],
      options2: [
        {
          value: '选项1',
          label: '技术协议'
        }, {
          value: '选项2',
          label: '销售合同'
        }, {
          value: '选项3',
          label: '采购合同'
        }, {
          value: '选项4',
          label: '其他'
        }],
      value1: [],
      value2:[],
      tableData: [
        {
          sn: 1,
          type: '技术协议',
          date: '2020-05-02',
          name: '王小虎',
          subject: 'E888项目技术协议',
          status:'已完成'
        }, {
          sn: 2,
          type: '电气方案',
          date: '2021-05-02',
          name: '王小虎',
          subject: 'E777电气',
          status:'已完成'
        }, {
          sn: 3,
          type: '合同评审',
          date: '2023-05-02',
          name: '王小虎',
          subject: 'E888销售合同',
          status:'已完成'
        }, {
          sn: 4,
          type: '补充协议',
          date: '2024-05-02',
          name: '王小虎',
          subject: 'E888补充协议',
          status:'审批中'
        }]
    };
  },
  methods: {
    handleCheckAllChange(val) {
      this.checkedCities = val ? cityOptions : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
    },
    handleRowClick() {
      location.href = 'review_detail'
    },
  }
}
</script>

<style scoped>
.el-form .el-form-item{
  padding-left: 40px;
}
.el-table{
  margin: 20px 0;
}
</style>